<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>
<style>
    .divtop{
        width: 1113px; height: 40px;border: 1px solid #b7d5df;line-height: 40px;margin:auto;margin-top:5px;
    }
    .layui-table-box, .layui-table-view{
        margin:auto;
    }
</style>
<body>
<div class="divtop">
    <div class="layui-form-item layui-form" >
        <div class="layui-inline" >
            <label class="layui-form-label" >商品类型:</label>
            <div class="layui-input-inline">
                <select name="quiz" lay-verify="selecttype" lay-search="" lay-filter="selecttype" id="selecttype">

                </select>
            </div>
        </div>
        商品编号：
        <div class="layui-inline" >
            <input class="layui-input" name="name" placeholder="请输入编号" id="pid" autocomplete="off">
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btns layui-btn-normal" id="selectpid" data-type="getCheckData" >查询</button>
        </div>

    </div>
</div>
<table id="demo" lay-filter="demo"  ></table>
<form class="layui-form" id="form" hidden="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">商品编号</label>
        <div class="layui-input-block">
            <input type="text" name="title" id="pids" readonly maxlength="13" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" autocomplete="off" placeholder="商品编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" id="pnames" lay-verify="required" autocomplete="off" placeholder="商品名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品类型</label>
        <div class="layui-input-block">
            <select name="quiz"id="ptids"  lay-verify="selecttypes" lay-search="requireds" lay-filter="selecttypes" >

            </select>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>上传图片</legend>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <img class="layui-upload-img"style="border: 1px solid red;width: 100px;height: 100px;" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input type="number" name="title" id="pprices"  lay-search="required"  autocomplete="off" placeholder="商品价格" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" id="pstatuss"  title="上架中" checked="">
            <input type="radio" name="sex" id="nopstatus" title="未上架">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存数量</label>
        <div class="layui-input-block">
            <input type="number" name="title" id="pnumbers" lay-verify="number" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" autocomplete="off" placeholder="库存数量" class="layui-input">
        </div>
    </div>
</form>
<script type="text/html" id="sexTpl">
    {{#  if(d.pstatus ==="上架中"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shangjia" style="background-color: #5cb85c">上架中</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs"lay-event="xiajia"  style="background-color: #7266BA">未上架</a>
    {{#  } }}
</script>
<script type="text/html" id="imgs">
   <img src="/{{d.pimg}}"/>
</script>
<script src="plugins/layui/layui.js" charset="utf-8"></script>
<script src="plugins/layui/jquery-3.3.1.min.js"></script>
<script>
    var pimg;
    $(function () {
        var table=null;
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/UploadFile'
                , before: function (obj) {
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    layer.msg(res.msg);
                    pimg=res.data.src;
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        })
        layui.use('table', function(){
            var index = layer.load(2, {time: 10*100}); //又换了种风格，并且设定最长等待10秒
            table= layui.table;
            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.confirm('真的删除行么', function(index){
                        $.post("/Productweb?action=delete",{pid:data.pid},function (data) {
                            if (data.msg == "删除成功") {
                                //执行重载
                                table.reload('idsw', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                            layer.msg(data.msg);
                            layer.close(index);
                        })

                    });
                }  else if(obj.event === 'edit'){
                    console.log(data)
                  $("#pids").val(data.pid);
                  $("#pnames").val(data.pname);
                  $("#ptids").val(data.ptid);
                  $("#pprices").val(data.pprice);
                  data.pstatus=="上架中"?$("#pstatuss").prop("checked",true):$("#nopstatus").prop("checked",true);
                   $("#pnumbers").val(data.pnumber);
                   $("#demo1").prop("src","/"+data.pimg);
                    pimg=data.pimg
                    form.render();
                    layer.open({
                        type:1
                        ,content:$("#form")
                        ,area:['850px','500px']
                        ,btn: ['修改', '取消'] //只是为了演示
                        ,yes: function(){
                            if($("#pName").val()==""){
                                layer.msg("类型名称不能为空");
                                return;
                            }
                            var pid=$("#pids").val();
                            var pname=$("#pnames").val();
                            var ptid=$("#ptids").val();
                            var pprice=$("#pprices").val();
                            var pstatus=$("#pstatuss").prop("checked")?"上架中":"已下架";
                            var pnumber=$("#pnumbers").val();
                            if(pname==""){layer.msg("商品名称不能为空");return;}
                            if(pprice==""){layer.msg("商品价格不能为空");return;}
                            if(pnumber==""){layer.msg("商品数量不能为空");return;}
                            if(pimg==""){layer.msg("请上传图片");return;}
                            $.post("/Productweb?action=update",{
                                pid:pid,
                                pname:pname,
                                ptid:ptid,
                                pprice:pprice,
                                pstatus:pstatus,
                                pnumber:pnumber,
                                pimg:pimg}
                                ,function(data){
                                    if (data.msg == "修改成功") {
                                        layer.closeAll();
                                        //执行重载
                                        table.reload('idsw', {
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                    }
                                    layer.msg(data.msg);
                                })
                        }
                        ,btn2: function(){
                            //关闭
                            layer.closeAll();
                        }
                    });
                }
                else if(obj.event === 'shangjia'){
                    $.ajax({
                        type : "get",
                        url : "/Productweb?action=updatestatus",
                        async : true,
                        data : {
                            "pid" : data.pid,
                            "pstatus" : "未上架"
                        },
                        success : function(data) {
                            if (data.msg == "修改成功") {
                                //执行重载
                                table.reload('idsw', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                            layer.msg(data.msg);
                        }
                    });
                }
                else if(obj.event === 'xiajia'){
                    $.ajax({
                        type : "get",
                        url : "/Productweb?action=updatestatus",
                        async : true,
                        data : {
                            "pid" : data.pid,
                            "pstatus" : "上架中"
                        },
                        success : function(data) {
                            if (data.msg == "修改成功") {
                                //执行重载
                                table.reload('idsw', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                            layer.msg(data.msg);
                        }
                    });
                }
            });

            //进行渲染
            table.render({
                elem: '#demo'
                ,height: 471
                ,width: 1113
                ,page:true
                ,url: '/Productweb?action=fintypejson&tid=1' //数据接口
                ,cellMinWidth: 120
                ,cols: [[ //表头
                    {type:'numbers', title: '序号'}
                    ,{field: 'pid', title: '商品编号',align:'center'}
                    ,{field: 'pname', title: '商品名称', align: 'center'}
                    ,{field: 'tname', title: '商品类型',align:'center'}
                    ,{field: 'pimg', title: '商品图片',align:'center',templet:"#imgs"}
                    ,{field: 'pprice', title: '商品价格',align:'center',sort:true}
                    ,{field: 'pnumber', title: '库存数量', align:'center',sort:true}
                    ,{field: 'pstatus', title: '状态',align:'center',templet : '#sexTpl',sort:true}
                    ,{field: 'right', title: '操作',width:'118', align:'center',  toolbar: '#barDemo'}
                ]]
                ,id:"idsw"
            });
        });
        //进行按类型查询
        var form;
        layui.use('form', function(){
            form= layui.form;
            form.on('select(selecttype)', function(data) {
                //进行渲染
                table.render({
                    elem: '#demo'
                    , height: 471
                    , width: 1113
                    , page: true
                    , url: '/Productweb?action=fintypejson&tid='+data.value //数据接口
                    ,cellMinWidth: 120
                    , cols: [[ //表头
                        {type: 'numbers', title: '序号'}
                        , {field: 'pid', title: '商品编号', align: 'center'}
                        , {field: 'pname', title: '商品名称', align: 'center'}
                        , {field: 'tname', title: '商品类型', align: 'center'}
                        ,{field: 'pimg', title: '商品图片',align:'center',templet:"#imgs"}
                        , {field: 'pprice', title: '商品价格', align: 'center',sort:true}
                        , {field: 'pnumber', title: '库存数量', align: 'center',sort:true}
                        ,{field: 'pstatus', title: '状态',align:'center',templet : '#sexTpl',sort:true}
                        , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                    ]]
                    , id: "idsw"
                });
            })

            $.ajax({
                type:"get",
                url:"/ProductTypeweb?action=gson",//请求路径
                success:function(data){//请求成功后的事件
                    $.each(data,function(index,obj){
                        var option=$("<option value='"+obj.tid+"'>"+obj.tname+"</option>");
                        $("#selecttype").append(option);
                        form.render();
                    })
                    $.each(data,function(index,obj){
                        var option=$("<option value='"+obj.tid+"'>"+obj.tname+"</option>");
                        $("#ptids").append(option);
                        form.render();
                    })
                }
            })
            //单击查询
            $("#selectpid").click(function () {
                //进行渲染
                table.render({
                    elem: '#demo'
                    , height: 471
                    , width: 1113
                    , url: '/Productweb?action=finpidjson&pid='+$("#pid").val() //数据接口
                    ,cellMinWidth: 120
                    , cols: [[ //表头
                        {type: 'numbers', title: '序号'}
                        , {field: 'pid', title: '商品编号', align: 'center'}
                        , {field: 'pname', title: '商品名称', align: 'center'}
                        ,{field: 'pimg', title: '商品图片',align:'center',templet:"#imgs"}
                        , {field: 'pprice', title: '商品价格', align: 'center',sort:true}
                        , {field: 'pnumber', title: '库存数量', align: 'center',sort:true}
                        ,{field: 'pstatus', title: '状态',align:'center',templet : '#sexTpl',sort:true}
                        , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                    ]]
                    , id: "idsw"
                });
            })
        });
    })
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="detail">删除</a>
</script>

</body>

</html>